@{
    ViewData["Title"] = "工序分类管理";
}
<h1>工序分类管理列表</h1>

<link href="~/css/site.css" rel="stylesheet" />
<link href="~/layui/css/layui.css" rel="stylesheet" />

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">工序分类编号</label>
        <div class="layui-input-inline">
            <input type="text" id="processTypeCode" class="layui-input" placeholder="请输入工序分类编号">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">工序分类名称</label>
        <div class="layui-input-inline">
            <input type="text" id="processTypeName" class="layui-input" placeholder="请输入工序分类名称">
        </div>
    </div>
    <div class="layui-inline">
        <button type="button" class="layui-btn" onclick="Getshow()">
            <i class="layui-icon layui-icon-search"></i> 查询
        </button>
        <button type="button" class="layui-btn layui-btn-normal" onclick="AddProcessType()">
            <i class="layui-icon layui-icon-add-1"></i> 新增
        </button>
    </div>
</div>

<!-- 数据表格 -->
<table class="layui-table" lay-size="sm">
    <thead>
        <tr>
            <th style="width:60px;">编号</th>
            <th style="width:120px;">工序分类编号</th>
            <th style="width:180px;">工序分类名称</th>
            <th style="width:80px;">状态</th>
            <th style="width:200px;">备注</th>
            <th style="width:150px;">操作</th>
        </tr>
    </thead>
    <tbody id="body">
        <!-- 数据行将在这里动态生成 -->
    </tbody>
</table>

<!-- 分页容器 -->
<div id="demo-laypage-all"></div>

<script src="~/js/site.js"></script>
<script src="~/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<script>
    // 全局变量
    var pageindex = 1;
    var pagesize = 15; // 修改默认页面大小为15
    var total = 0;

    $(function () {
        // 页面加载时先获取数据，数据加载完成后再初始化分页
        Getshow();
    });

    // 显示数据
    function Getshow() {
        var processTypeCode = $('#processTypeCode').val() || '';
        var processTypeName = $('#processTypeName').val() || '';
        
        // 显示加载状态
        $('#body').html('<tr><td colspan="6" style="text-align:center;color:#999;">数据加载中...</td></tr>');
        
        $.ajax({
            url: 'http://localhost:5141/api/Process/ShowProcessType',
            type: 'GET',
            data: {
                pageindex: pageindex,
                pagesize: pagesize,
                processTypeCode: processTypeCode,
                processTypeName: processTypeName
            },
            success: function (res) {
                if (res && res.pageData) {
                    total = res.totalCount || 0;
                    var str = '';
                    
                    if (res.pageData.length > 0) {
                        $(res.pageData).each(function (index) {
                            var statusText = this.processTypeStatus ? '<span class="layui-badge layui-bg-green">启用</span>' : '<span class="layui-badge layui-bg-gray">禁用</span>';
                            var remark = this.typeRemark || '';
                            
                            str += `<tr>
                                    <td>${this.id}</td>
                                    <td>${this.processTypeCode || ''}</td>
                                    <td>${this.processTypeName || ''}</td>
                                    <td>${statusText}</td>
                                    <td title="${remark}">${remark.length > 20 ? remark.substring(0, 20) + '...' : remark}</td>
                                    <td>
                                        <button class="layui-btn layui-btn-xs" onclick="Detail(${this.id})">
                                            <i class="layui-icon layui-icon-edit"></i> 编辑
                                        </button>
                                        <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="DelProcessType(${this.id})">
                                            <i class="layui-icon layui-icon-delete"></i> 删除
                                        </button>
                                    </td>
                                </tr>`;
                        });
                    } else {
                        str = '<tr><td colspan="6" style="text-align:center;color:#999;">暂无数据</td></tr>';
                    }
                    
                    $('#body').html(str);
                    
                    // 数据加载完成后，初始化分页
                    initPagination();
                } 
            },
            error: function (xhr, status, error) {
                console.error('请求失败:', error);
                $('#body').html('<tr><td colspan="6" style="text-align:center;color:#f00;">数据加载失败，请重试</td></tr>');
                total = 0;
                initPagination();
            }
        });
    }

    // 初始化分页
    function initPagination() {
        layui.use(['laypage'], function () {
            var laypage = layui.laypage;
            
            laypage.render({
                elem: 'demo-laypage-all',
                count: total,
                limit: pagesize,
                limits: [10, 15, 20, 25, 30, 50],
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                jump: function (obj, first) {
                    if (!first) {
                        pageindex = obj.curr;
                        pagesize = obj.limit;
                        Getshow();
                    }
                }
            });
        });
    }

    // 删除工序分类
    function DelProcessType(id) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('确认删除该工序分类吗？', {
                icon: 3, 
                title: '提示',
                btn: ['确定', '取消']
            }, function(index){
                // 显示删除中状态
                var loadIndex = layer.load(1, {shade: [0.3, '#000']});
                
                $.ajax({
                    url: 'http://localhost:5141/api/Process/DelProcesssType',
                    type: 'POST',
                    data: JSON.stringify({id: id}),
                    contentType: 'application/json',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res && res.data > 0) {
                            layer.msg('删除成功', {icon: 1, time: 1500});
                            // 重新加载数据
                            Getshow();
                        } else {
                            layer.msg('删除失败: ' + (res.message || '未知错误'), {icon: 2});
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.close(loadIndex);
                        layer.msg('请求失败: ' + error, {icon: 2});
                        console.error('Error:', xhr.responseText);
                    }
                });
                layer.close(index);
            });
        });
    }

    // 在容器中打开页面
    function openInContainer(url, title) {
        if (window.parent && window.parent.loadPage) {
            window.parent.loadPage(url, title || document.title);
        } else {
            location.href = url; // 兜底：如果没在容器里，就正常跳转
        }
    }

    // 编辑工序分类
    function Detail(id) {
        localStorage['processTypeId'] = id;
        openInContainer('/Process/EditProcessType', '编辑工序分类');
    }
    
    // 新增工序分类
    function AddProcessType() {
        openInContainer('/Process/AddProcessType', '新增工序分类');
    }
</script>
